<template>
  <a-card :bordered="false">
    <a-tabs default-active-key="1" tab-position="top">
      <a-tab-pane key="1" tab="疫情日报">
        <!-- 搜索条件 -->
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="报表日期">
                  <a-range-picker @change="onChange" v-model="timeValue"/>
                </a-form-item>
              </a-col>

              <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons" >
              <a-button type="primary" icon="search" @click='loadData'>查询</a-button>
              <a-button type="primary" style="margin-left: 8px"  icon="reload" @click='reload'>重置</a-button>
            </span>
              </a-col>
            </a-row>
          </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
          <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
        </div>
        <a-spin :spinning='downLoading' tip=" 正在下载数据，请耐心等待">
        <a-table
          :row-key="record => record.ds"
          ref="table"
          size="middle"
          bordered
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          @change="handleTableChange"
          :loading="loading"
        >

          <span slot="action" slot-scope="text, record">
            <a @click='handleDetail(record)'>统计详情</a>
            <a-divider type="vertical" />
             <a @click='handleWordDetail(record)'>预览</a>
            <a-divider type="vertical" />
            <a @click='download(record.ds)'> 数据下载 <a-icon type="download" /></a>
          </span>
        </a-table>
        </a-spin>
      </a-tab-pane>

      <a-tab-pane key="2" tab="疫情周报">
        <statistics-home-weekly></statistics-home-weekly>
      </a-tab-pane>

      <a-tab-pane key="3" tab="模板管理">

        <category-template></category-template>
      </a-tab-pane>
    </a-tabs>
    <statistics-home-modal ref='modal'></statistics-home-modal>
    <word-show-modal ref='modal2'></word-show-modal>
  </a-card>
</template>

<script>
import ReportsEpidemicDailyService from '@/myService/ReportsEpidemicDailyService'
import CategoryTemplate from '@views/data-governance/smart-reports/epidemic-daily/components/CategoryTemplate'
import StatisticsHomeModal from '@views/data-governance/smart-reports/epidemic-daily/components/StatisticsHomeModal'
import WordShowModal from '@views/data-governance/smart-reports/epidemic-daily/components/WordShowModal'
import StatisticsHomeWeekly from '@views/data-governance/smart-reports/epidemic-weekly/StatisticsHome'

export default {
  components: {
    CategoryTemplate,
    StatisticsHomeModal,
    WordShowModal,
    StatisticsHomeWeekly,
  },
  data () {
    return {
      timeValue:undefined,
      // 查询参数
      queryParam: {
        beginDate:'',
        endDate:'',
        pageSize: 10,
        pageIndex:1,
      },
      /* 数据源 */
      dataSource:[],
      /* 分页参数 */
      ipagination:{
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (text, row, index) => <span>{this.ipagination.pageSize * (this.ipagination.current - 1) + index + 1}</span>
        },
        {
          title: '日期',
          dataIndex: 'ds',
          align: 'center',
          customRender: (text) => text.toString().replace(/^(\d{4})(\d{2})(\d{2})$/, "$1-$2-$3")
        },
        {
          title: '工单数',
          align:'center',
          dataIndex: 'total',
        },
        {
          title: '环比',
          align:'center',
          dataIndex: 'annulus',
        },
        {
          title: '办结率',
          align:'center',
          dataIndex: 'completionRate',
        },
        {
          title: '操作',
          key: 'action',
          align:'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      /* table加载状态 */
      loading:false,
      // 加载数据方法 必须为 Promise 对象
      downLoading:false

    }
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true;
      this.dataSource=[]
      this.ipagination.total=0
      this.queryParam.pageSize=this.ipagination.pageSize
      this.queryParam.pageIndex=this.ipagination.current
      ReportsEpidemicDailyService.getEpidemicStatisticsHome(this.queryParam).then((res) => {
        if (res.success) {
          console.log(res)
          this.dataSource = res.result.records||res.result;
          if(res.result.total)
          {
            this.ipagination.total = res.result.total;
          }else{
            this.ipagination.total = 0;
          }
        }else{
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loading = false
      })
    },
    reload(){
      this.queryParam={
        beginDate:'',
        endDate:'',
        pageSize: 10,
        pageIndex:1,
      }
      this.ipagination.pageSize=10;
      this.ipagination.current=1;
      this.timeValue=undefined;
      this.loadData();
    },
    onChange(date, dateString) {
      this.queryParam.beginDate=dateString[0].replace(/-/g, "")
      this.queryParam.endDate=dateString[1].replace(/-/g, "")
    },
    handleAdd(){
      this.$router.push("/report/statistics-epidemic-daily-add")
    },
    handleTableChange(pagination){
      console.log(pagination)
      this.ipagination.current = pagination.current;
      this.ipagination.pageSize = pagination.pageSize;
      this.loadData();
    },
    handleDetail(row){
      this.$refs.modal.open(row.ds)
    },
    handleWordDetail(row){
      this.$refs.modal2.open(row.ds)
    },
    download(ds){
      this.downLoading=true;
      ReportsEpidemicDailyService.generateExcelOrderDaily(ds).finally(
        ()=>{
          this.downLoading=false;
        }
      )
    }
  },
}
</script>